<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/login.js"></script>
</head>
<body style="height: 100%">
<div id="app" style="height: 100%">
    <header style="display: flex; justify-content: space-between; padding-inline: 10%;
                            align-items: center; background-color: #eee">
        <h1>xxxx平台</h1>
        <login ref="lg" @onlogin="onlogin"></login>
        <div v-if="!user">
            <a href="#" @click.prevent="$refs.lg.showLogin()">登录</a>
            <a href="#">注册</a>
        </div>
        <div v-else>
            欢迎: {{user.uname}}
            <a href="#">修改密码</a>
            <a href="logout">退出</a>
        </div>
    </header>
    <div style="display: flex; justify-content: center; align-items: center; height: 100%;
                 box-sizing: border-box;padding-bottom: 10%;margin: 0px">
        <div style="display: grid; grid-gap: 10px; grid-template-columns: auto">
            <a href="忘记密码.html"><h1>忘记密码.html</h1></a>
            <a href="在线聊天.html"><h1>在线聊天.html</h1></a>
        </div>
    </div>
</div>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            user:null
        },
        methods:{
            onlogin(user){
                this.user = user;
            }
        }
    })
</script>

</body>
</html>